<template>
    <div>
        <div class="top">
            <div>
                <div style="display: inline-block;margin-top: 3vh;display: flex;align-items: center;">
                    <h1 style="color: #fff;margin-right: 8px;">内容管理</h1>
                    <el-icon>
                        <Connection style="color: #fff;" />
                    </el-icon>
                    <p style="color:#fff;margin: 0 8px 0 8px;">-</p>
                    <p style="color:#fff">试题管理</p>
                    <p style="color:#fff;margin: 0 8px 0 8px;">-</p>
                    <p style="color:#fff">题库名称</p>
                </div>
                <el-card class="box-card" style="position: relative;">
                    <p style="margin-bottom: 8px;border-bottom: 2px solid #f7f7f7;height: 35px;width: 100%;">题库管理</p>
                    <el-button type="primary" style="width: 135px;background: #3778ff;margin: 0 0 8px 0;"
                        @click="data.dialogVisible = true">新增题目</el-button>
                    <el-button type="primary" style="width: 135px;background: #3778ff;margin: 0 0 8px 19px;"
                        @click="data.dialogVisible = true">批量导入</el-button>
                    <div style="width: 100%;min-height: 430px;background-color:#f9f9f9;">
                        <div class="xm" style="display: flex;background-color: #fff;">

                            <!-- 查询表单 -->
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="题目ID">
                                    <el-input v-model="formInline.user" placeholder="请输入题目ID" />
                                </el-form-item>
                                <el-form-item label="知识点">
                                    <el-input v-model="formInline.user" placeholder="请输入知识点" />
                                </el-form-item>
                                <el-form-item label="排序">
                                    <el-select v-model="formInline.region" placeholder='请选择内容'>
                                        <el-option label="做题人数" value="正确率" />
                                        <el-option label="做题人数" value="正确率" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button style="box-shadow: 0 0 3px;background: #3778ff;width: 80px;" type="primary"
                                        @click="onSubmit">查询</el-button>
                                    <el-button style="width: 80px;box-shadow: 0 0 3px;" @click="onSubmit">重置</el-button>
                                </el-form-item>
                            </el-form>

                        </div>
                        <div style="height: 400px; display: flex;flex-wrap: wrap;overflow-y:scroll;">
                            <!-- 数据展示的table -->
                            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 8px;"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55" />
                                <el-table-column label="题目ID" width="120">
                                    <template #default="scope">{{ scope.row.date }}</template>
                                </el-table-column>
                                <el-table-column property="name" label="题型" width="120" />
                                <el-table-column property="address" label="题干内容" show-overflow-tooltip />
                                <el-table-column property="address" label="图片" show-overflow-tooltip />
                                <el-table-column property="address" label="视频解析" show-overflow-tooltip />
                                <el-table-column property="address" label="文字解析" show-overflow-tooltip />
                                <el-table-column property="address" label="操作" show-overflow-tooltip>
                                    <template #default="">
                                        <el-button link type="primary" size="small">
                                            编辑
                                        </el-button>
                                        <el-button link type="primary" size="small">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="position: absolute;bottom: 0;width: 100%;background-color: #fff;z-index: 999;">

                                <el-pagination style="margin-left: 60%;" :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-model="data.dialogVisible" style="width: 40vw;display:flex;flex-direction: column;align-items: center;"
            title="新建题库" width="30%" :before-close="handleClose">
            <!-- form表单 -->
            <el-form ref="ruleFormRef" :model="data.forms" status-icon :rules="rules" label-width="90px"
                class="demo-ruleForm">
                <el-form-item label="题库名称" prop="pass">
                    <el-input v-model="data.forms.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="项目" prop="region">
                    <el-select v-model="data.forms.project" @change="chil" placeholder="请选择项目名称">
                        <el-option v-for="i in data.options" :key="i.title" :label="i.title" :value="i.title" />
                    </el-select>
                    <el-select v-model="data.forms.item" placeholder="请选择项目名称">
                        <el-option v-for="i in data.children" :key="i.title" :label="i.title" :value="i.title" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
                    <el-button @click="data.dialogVisible = !data.dialogVisible">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup >
import { reactive, ref, onMounted } from 'vue'

let data = reactive({
    idx: 0,
    firsts: [],
    dialogVisible: false,
    forms: {
        title: '',
        project: '',
        item: ''
    },
    children: [],
    options: [
        {
            title: '初级职称', children: [
                { title: '初级实战演练' },
                { title: '初级常见题型' },
            ]
        },
        {
            title: '中级职称', children: [
                { title: '中级项目实战' },
                { title: '中级题型试题' },
            ]
        },
        {
            title: '高级职称', children: [
                { title: '高级真题演练' },
                { title: '常见题型复习' },
            ]
        }
    ]
})

//修改children
let chil = (e) => {
    data.children = data.options.filter(i => i.title == e && i.children)[0]['children']
}

import { ElMessageBox, ElTable } from 'element-plus'
const handleClose = (done) => {
    ElMessageBox.confirm('即将取消添加~')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

//form表单
const ruleFormRef = ref()

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('该选项不可为空~'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
    age: '',
})

const rules = reactive({
    pass: [{ validator: validatePass, trigger: 'blur' }]
})

import api from '../../Api'
import { ElMessage } from 'element-plus'
const submitForm = async () => {
    if (data.forms.title) {
        let obj = { 'title': data.forms.title, project: [data.forms.project, data.forms.item] }
        await api.post('/cpp/addfirst', obj)
        data.dialogVisible = !data.dialogVisible
        data.forms = {}
        China()
        ElMessage({
            message: '题库添加成功~',
            type: 'success',
        })
    } else {
        ElMessage({
            message: '题库名称不可为空~',
            type: 'warning',
        })
    }

}

//请求数据
let China = async () => {
    let res = await api.get('/cpp/first')
    // console.log(res.data);
    data.firsts = res['data']
}

onMounted(() => {
    China()
})


//查询表单
const formInline = reactive({
    user: '',
    region: '',
})

const onSubmit = () => {
    console.log('submit!')
}

//table表格

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]



</script>

<style scoped>
.top {
    background: #3778ff;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
}

.box-card {
    width: 80vw;
    height: 100%;
    min-height: 540px;
    margin-top: 1.6vw;
    border-radius: 13px;
}

.xm p {
    width: 140px;
    height: 40px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 40px;
    font-size: 13px;
    cursor: pointer;
}

.item {
    width: 350px;
    height: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    margin: 23px 0 0 23px;
    background: #fff;
}
</style>